<template>
  <div class="enterout-container">
    <!-- 搜索条件区域 -->
    <div class="search-section">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="出入库单号">
          <el-input
            v-model="searchForm.code"
            placeholder="请输入出入库单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input
            v-model="searchForm.depotName"
            placeholder="请输入仓库名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select
            v-model="searchForm.businessType"
            placeholder="请选择"
            clearable
            style="width: 150px"
          >
            <el-option label="入库" :value="2" />
            <el-option label="出库" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="出入库类型">
          <el-select
            v-model="searchForm.stId"
            placeholder="请选择"
            clearable
            style="width: 150px"
          >
            <el-option label="进货入库" :value="1" />
            <el-option label="销售出库" :value="2" />
            <el-option label="调拨入库" :value="3" />
            <el-option label="调拨出库" :value="4" />
            <el-option label="退货仓库" :value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="出入库日期">
          <el-date-picker
            v-model="searchForm.dateTime"
            type="date"
            placeholder="选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 150px"
          />
        </el-form-item>
       
        <el-form-item>
          <el-button type="info" @click="resetSearch">重置</el-button>
          <el-button type="success" @click="searchData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计摘要区域 -->
    <div class="summary-section">
      <div class="summary-card">
        <div class="summary-item">
          <div class="summary-label">入库数量</div>
          <div class="summary-value orange">{{ summary.inboundQuantity }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-label">入库金额</div>
          <div class="summary-value blue">{{ summary.inboundAmount }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-label">出库数量</div>
          <div class="summary-value orange">{{ summary.outboundQuantity }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-label">出库金额</div>
          <div class="summary-value orange">{{ summary.outboundAmount }}</div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      
      <el-button @click="refreshData">刷新</el-button>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="60"  />
        <el-table-column prop="code" label="出入库单号" width="120" />
        <el-table-column prop="dateTime" label="出入库日期" width="200" >
           <template #default="scope">
            {{ moment(scope.row.dateTime).format('YYYY-MM-DD HH:mm:ss') }}
           </template>
        </el-table-column>
        <el-table-column label="业务类型" width="100">
          <template #default="{ row }">
            {{ row.businessType === 1 ? '出库' : row.businessType === 2 ? '入库' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="stName" label="出入库类型" width="120" />
        <el-table-column prop="depotName" label="仓库名称" width="100" />
        <el-table-column label="入库数量" width="100" align="right">
          <template #default="{ row }">
            {{ row.businessType === 1 ? row.incomingQuantity : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="出库数量" width="100" align="right">
          <template #default="{ row }">
            {{ row.businessType === 2 ? row.incomingQuantity : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="入库金额" width="120" align="right">
          <template #default="{ row }">
            {{ row.businessType === 1 ? row.incomingMoney.toFixed(2) : '0.00' }}
          </template>
        </el-table-column>
        <el-table-column label="出库金额" width="120" align="right">
          <template #default="{ row }">
            {{ row.businessType === 2 ? row.incomingMoney.toFixed(2) : '0.00' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.state === 1 ? 'success' : 'warning'">
              {{ row.state === 1 ? '出库' : row.state === 2 ? '入库' : '' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <div class="pagination-info">
        总 {{ total }} 条
      </div>
      <el-pagination
        v-model:current-page="pagination.pageIndex"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[15, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

import moment from 'moment'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/http/axiosHelper'

// 定义类型
interface EnterOutItem {
  id: number
  stockId: number
  code: string
  dateTime: string
  businessType: number
  stId: number
  stName: string
  depotId: number
  depotName: string
  incomingQuantity: number
  incomingMoney: number
  state: number
}

interface EnterOutParams {
  pageIndex: number
  pageSize: number
  businessType?: number
  stId?: number
  dateTime?: string
  depotName?: string
  code?: string
}

interface EnterOutResponse {
  totalPage: number
  totalCount: number
  items: EnterOutItem[]
  msg: string
  code: number
}

// 搜索表单
const searchForm = reactive({
  code: '',
  depotName: '',
  businessType: '',
  stId: '',
  dateTime: '',
  createDate: ''
})

// 统计摘要
const summary = reactive({
  inboundQuantity: 0,
  inboundAmount: '0.00',
  outboundQuantity: 0,
  outboundAmount: '0.00'
})

// 分页参数
const pagination = reactive({
  pageIndex: 1,
  pageSize: 15
})

// 表格数据
const tableData = ref<EnterOutItem[]>([])
const total = ref(0)
const loading = ref(false)
import Purchase from '@/http/PurSale'   
// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const params: EnterOutParams = {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
      code: searchForm.code || undefined,
      depotName: searchForm.depotName || undefined,
      businessType: searchForm.businessType ? Number(searchForm.businessType) : undefined,
      stId: searchForm.stId ? Number(searchForm.stId) : undefined,
      dateTime: searchForm.dateTime || undefined
    }

    const response = await http.get<EnterOutResponse>('/scmreadconsul/api/Ledger/ShowEnterOut', { params })
    const data = response.data

    if (data.code === 200) {
      tableData.value = data.items || []
      total.value = data.totalCount || 0
      
      // 更新统计摘要
      updateSummary(data.items)
      
      ElMessage.success(data.msg || '数据获取成功')
    } else {
      ElMessage.error(data.msg || '数据获取失败')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 更新统计摘要
const updateSummary = (items: EnterOutItem[]) => {
  let inboundQuantity = 0
  let inboundAmount = 0
  let outboundQuantity = 0
  let outboundAmount = 0

  items.forEach(item => {
    if (item.businessType === 1) { // 入库
      inboundQuantity += item.incomingQuantity
      inboundAmount += item.incomingMoney
    } else if (item.businessType === 2) { // 出库
      outboundQuantity += item.incomingQuantity
      outboundAmount += item.incomingMoney
    }
  })

  summary.inboundQuantity = inboundQuantity
  summary.inboundAmount = inboundAmount.toFixed(2)
  summary.outboundQuantity = outboundQuantity
  summary.outboundAmount = outboundAmount.toFixed(2)
}

// 搜索数据
const searchData = () => {
  pagination.pageIndex = 1
  fetchData()
}

// 重置搜索
const resetSearch = () => {
  searchForm.code = ''
  searchForm.depotName = ''
  searchForm.businessType = ''
  searchForm.stId = ''
  searchForm.dateTime = ''
  searchForm.createDate = ''
  pagination.pageIndex = 1
  fetchData()
}

// 刷新数据
const refreshData = () => {
  fetchData()
}


// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageIndex = 1
  fetchData()
}

// 当前页改变
const handleCurrentChange = (page: number) => {
  pagination.pageIndex = page
  fetchData()
}

// 组件挂载时初始化数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.enterout-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  margin-bottom: 0;
}

.summary-section {
  margin-bottom: 20px;
}

.summary-card {
  display: flex;
  gap: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.summary-item {
  flex: 1;
  text-align: center;
  padding: 15px;
  border-radius: 6px;
  background: #f8f9fa;
}

.summary-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.summary-value {
  font-size: 24px;
  font-weight: bold;
}

.summary-value.orange {
  color: #ff6b35;
}

.summary-value.blue {
  color: #007bff;
}

.action-section {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 8px;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-pagination) {
  justify-content: center;
}
</style>
